<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/sty.css">
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/vue.js"></script>
    <title>KFC</title>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="my-nav navbar navbar-expand-lg py-3 fixed-top">
      <div class="container">
        <!-- logo -->
        <a class="logo" href="./user.html"><img src="./img/LOGO.png" src="index.html"></a>
        <!-- 小菜单 -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#menu">
          <img src="./img/tong.svg" width="40px"></img>
        </button>

        <!-- 大菜单 -->
        <div class="collapse navbar-collapse justify-content-end" id="menu">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link " href="index.html" >首页</a>    
            </li>
            <li class="nav-item">
              <a class="nav-link " href="about.html" >关于KFC</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="scar.html" >购物车</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="login.html" >登录</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div
      class="my-intro bg-danger text-white text-center py-lg-4 py-md-3 py-sm-2"
    >
      <div class="container">
        <h1 class="display-2">肯德基</h1>
        <h2 class="my-5">疯狂星期四</h2>
        <p class="w-75 m-auto">
          KFC  Crazy  Thursday  V  me  50 please !
        </p>
        <a href="./scar.html">
        <button
          type="button"
          class="btn btn-danger my-5 btn-outline-light btn-lg"
        >
          点击订餐
        </button>
        </a>
      </div>
    </div>

    <!-- 页面核心 -->
    <div class="thing">
      <div class="container">
        <div class="h1 text-center py-lg-4 py-md-3 py-2">一切尽在肯德基</div>
        <!-- 轮播图 -->
        <div id="carouselExampleIndicators" class="carousel slide mb-5" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" ></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" ></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" ></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" ></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" ></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="2500">
              <img src="img/lunbo1.jpg" class="d-block w-100" data-bs-interval="2000">
            </div>

            <div class="carousel-item" data-bs-interval="2500">
              <img src="img/lunbo_22.webp" class="d-block w-100" data-bs-interval="2000">
            </div>

            <div class="carousel-item" data-bs-interval="2500">
              <img src="img/lunbo3.png" class="d-block w-100" data-bs-interval="2000">
            </div>

            <div class="carousel-item" data-bs-interval="2500">
              <img src="img/lunbo4.jpg" class="d-block w-100" data-bs-interval="2000">
            </div>

            <div class="carousel-item" data-bs-interval="2500">
              <img src="img/lunbo5.jpg" class="d-block w-100" data-bs-interval="2000">
            </div>
          </div>

          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" ></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" ></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

        <!-- 餐品展示 -->

        <!-- 单点 -->
            <!-- food -->
    <div id="vuebox">
      <div class="bigbox">
          <div class="food fd1" :class="{active : big == 0 }">
              <div>
                  <img src="./img/kfc-AlcChLtl.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-cknsndalc.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-cknsndcombo.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-ChLtlCombo.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                <img src="./img/kfc-cknsndbigbox.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-biscuit.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-cknsndcombo.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-sandwichandsidesmeal.png">
                <h3>$8.50</h3>
            </div>
          </div>

          <div class="food fd2" :class="{active : big == 1  }">
              <div>
                  <img src="./img/kfc-new16pcTenders.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-IndFries.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-24WingsUnsauced.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-PopcornComboFries.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                <img src="./img/kfc-3pcCombo2T1D.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-3pcNHTendersCombo.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-8pcTendersMeal-test.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-5TenderCombo.png">
                <h3>$8.50</h3>
            </div>
              
          </div>
          <div class="food fd3" :class="{active : big == 2  }">
              <div>
                  <img src="./img/kfc-AlcThigh.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-AlcBreast.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-AlcLeg.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-AlcTender2.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                <img src="./img/kfc-4pcCombo.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-3pcCombo2T1D.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-AlcWing.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/Food_09.png">
                <h3>$8.50</h3>
            </div>

          </div>
          <div class="food fd4" :class="{active : big == 3  }">
              <div>
                  <img src="./img/kfc-Pepsi.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-sierramist.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-StrLemMed.jpg" style="border-radius: 15px;">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-sweetTea.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                <img src="./img/kfc-mtndew.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-mtndewsweetlightning.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-LemMed.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-drPepper.png">
                <h3>$8.50</h3>
            </div>

          </div>
          <div class="food fd5" :class="{active : big == 4  }">
              <div>
                  <img src="./img/kfc-FamousBowl.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-IndColeslaw.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-IndMacCheese.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                  <img src="./img/kfc-IndMashGravy.png">
                  <h3>$8.50</h3>
              </div>
              <div>
                <img src="./img/kfc-PotPie.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-MacCheeseBowlSideDrink.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-FamousBowlFillUp.png">
                <h3>$8.50</h3>
            </div>
            <div>
                <img src="./img/kfc-PotPieFillUp.png">
                <h3>$8.50</h3>
            </div>

          </div>
      </div>  

      <div class="smallbox">
          <div @mouseover="big=0" :class="{active : big == 0 }">
              <img src="./img/icon_kfc_top.svg" :class="{active : big == 0 }">
              <h2>汉堡</h2>
          </div>
          <div @mouseover="big=1" :class="{active : big == 1 }">
              <img src="./img/icon_kfc_top.svg" :class="{active : big == 1 }">
              <h2>小食</h2>
          </div>
          <div @mouseover="big=2" :class="{active : big == 2 }">
              <img src="./img/icon_kfc_top.svg" :class="{active : big == 2 }">
              <h2>炸鸡</h2>
          </div>
          <div @mouseover="big=3" :class="{active : big == 3 }">
              <img src="./img/icon_kfc_top.svg" :class="{active : big == 3 }">
              <h2>饮料</h2>
          </div>
          <div @mouseover="big=4" :class="{active : big == 4 }">
              <img src="./img/icon_kfc_top.svg" :class="{active : big == 4 }">
              <h2>其他</h2>
          </div>
      </div>
  </div>


        <!-- 套餐 -->
        <div class="menu section-padding">
          <div class="container">
              <div class="row">

                  <div class="col-12">
                      <h2 class="text-center mb-lg-5 my-5">套餐推荐</h2>
                  </div>

                  <div class="col-lg-4 col-md-6 col-12">
                      <div class="menu-thumb">
                          <div class="menu-image-wrap">
                              <img src="img/kfc-sandwichandsidesmeal.png" class="img-fluid menu-image" alt="">

                              <span class="menu-tag bg-warning">多人</span>
                          </div>

                          <div class="menu-info d-flex flex-wrap align-items-center">
                              <h4 class="mb-0">华莱士</h4>

                              <span class="price-tag bg-danger text-white shadow-lg ms-4"><small>$</small>32.50</span>

                              <div class="d-flex flex-wrap align-items-center w-100 mt-2">
                                  <h6 class="reviews-text mb-0 me-3">4.3/5</h6>

                                  <div class="reviews-stars">
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                  </div>

                                  <p class="reviews-text mb-0 ms-4">102 Reviews</p>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-lg-4 col-md-6 col-12">
                      <div class="menu-thumb">
                          <div class="menu-image-wrap">
                              <a href="./p1.html"><img src="img/kfc-sandwichandtendersmeal.png" class="img-fluid menu-image" alt=""></a>

                              <span class="menu-tag bg-warning">多人</span>
                          </div>

                          <div class="menu-info d-flex flex-wrap align-items-center">
                              <h4 class="mb-0">全家桶</h4>

                              <span class="price-tag bg-danger text-white shadow-lg ms-4"><small>$</small>47.90</span>

                              <div class="d-flex flex-wrap align-items-center w-100 mt-2">
                                  <h6 class="reviews-text mb-0 me-3">3/5</h6>

                                  <div class="reviews-stars">
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                  </div>

                                  <p class="reviews-text mb-0 ms-4">50 Reviews</p>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-lg-4 col-md-6 col-12">
                      <div class="menu-thumb">
                          <div class="menu-image-wrap">
                              <img src="img/kfc-8pcTendersMeal-test.png" class="img-fluid menu-image" alt="">

                              <span class="menu-tag bg-warning">单人</span>
                          </div>

                          <div class="menu-info d-flex flex-wrap align-items-center">
                              <h4 class="mb-0">香骨鸡</h4>

                              <span class="price-tag bg-danger text-white shadow-lg ms-4"><small>$</small>20.30</span>

                              <div class="d-flex flex-wrap align-items-center w-100 mt-2">
                                  <h6 class="reviews-text mb-0 me-3">3/5</h6>

                                  <div class="reviews-stars">
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                  </div>

                                  <p class="reviews-text mb-0 ms-4">86 Reviews</p>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-lg-4 col-md-6 col-12">
                      <div class="menu-thumb">
                          <div class="menu-image-wrap">
                              <img src="img/kfc-TendersCombo.png" class="img-fluid menu-image" alt="">

                              <span class="menu-tag bg-warning">单人</span>
                          </div>

                          <div class="menu-info d-flex flex-wrap align-items-center">
                              <h4 class="mb-0">下午茶</h4>

                              <span class="price-tag bg-danger text-white shadow-lg ms-4"><small>$</small>16.00</span>

                              <div class="d-flex flex-wrap align-items-center w-100 mt-2">
                                  <h6 class="reviews-text mb-0 me-3">3/5</h6>

                                  <div class="reviews-stars">
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                  </div>

                                  <p class="reviews-text mb-0 ms-4">44 Reviews</p>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-lg-4 col-md-6 col-12">
                      <div class="menu-thumb">
                          <div class="menu-image-wrap">
                              <img src="img/kfc-cknsndbigbox.png" class="img-fluid menu-image" alt="">

                              <span class="menu-tag bg-warning">单人</span>
                          </div>

                          <div class="menu-info d-flex flex-wrap align-items-center">
                              <h4 class="mb-0">香辣鸡腿堡</h4>

                              <span class="price-tag bg-danger text-white shadow-lg ms-4"><small>$</small>20.50</span>

                              <div class="d-flex flex-wrap align-items-center w-100 mt-2">
                                  <h6 class="reviews-text mb-0 me-3">4.3/5</h6>

                                  <div class="reviews-stars">
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                  </div>

                                  <p class="reviews-text mb-0 ms-4">102 Reviews</p>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-lg-4 col-md-6 col-12">
                      <div class="menu-thumb">
                          <div class="menu-image-wrap">
                              <img src="img/kfc-new12pcTendersMeal.png" class="img-fluid menu-image" alt="">

                              <span class="menu-tag bg-warning">单人</span>
                          </div>

                          <div class="menu-info d-flex flex-wrap align-items-center">
                              <h4 class="mb-0">碳水套餐</h4>

                              <span class="price-tag bg-danger text-white shadow-lg ms-4"><small>$</small>14.20</span>

                              <div class="d-flex flex-wrap align-items-center w-100 mt-2">
                                  <h6 class="reviews-text mb-0 me-3">3/5</h6>

                                  <div class="reviews-stars">
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star-fill reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                      <i class="bi-star reviews-icon"></i>
                                  </div>

                                  <p class="reviews-text mb-0 ms-4">64 Reviews</p>
                              </div>
                          </div>
                      </div>
                  </div>

              </div>
          </div>
      </div>


      <!-- 广告 -->
      <div>
        <img src="img/KFC-5.png" style="margin: 30px 0; width: 100%;">
        <img src="img/kfc-d-1x.webp" style="width: 100%;">
        <img src="img/lunbo2.jpg" style="width: 100%; margin: 30px 0;">
      </div>

      <div class="gg my-intro bg-danger my-4 text-center py-lg-4 py-md-3 py-sm-2">
        <div>
          <h3>KFC is better on the app</h3>
          <span>Download our KFC App to get the full experience.</span>
        </div>
        <div>
          <img src="img/ios.png" alt="">
          <img src="img/and.png" alt="">
        </div>
      </div>

      </div>
    </div>

      <!-- footer -->
      <footer class="bd-footer py-5 mt-5 bg-white">
          <div class="container py-3">
            <div class="row">
              <div class="col-lg-3 mb-3 text-black">
                <img src="img/logo-kfc.svg" style="margin: 5px 0 0;">
                <ul class="list-unstyled">
                  <li><img src="./img/download.png" alt=""></li>
                  <h4 style="margin-top: 10px;">湖北-武汉</h4>
                </ul>
              </div>
              <div class="col-lg-3 mb-3 text-black">
                <h3>背后故事</h3>
                <ul class="list-unstyled">
                  <li>关于KFC</li>
                  <li>经营理念</li>
                  <li>后勤保障</li>
                  <li>保护环境</li>
                </ul>
              </div>
              <div class="col-lg-3 mb-3 text-black">
                <h3>欢迎您来</h3>
                <ul class="list-unstyled">
                  <li>加盟我们</li>
                  <li>您的建议</li>
                  <li>意见反馈</li>
                  <li>餐厅地图</li>
                </ul>
              </div>
              <div class="col-lg-3 mb-3 text-black">
                <h3>企业责任</h3>
                <ul class="list-unstyled">
                  <li>以食为天</li>
                  <li>以人为本</li>
                  <li>以爱为先</li>
                  <li>以绿为源</li>
                </ul>
              </div>
            </div>
    
            <div class="footer-row-bottom end">
              <div class="footer-columnb"><img src="img/Youtube.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Twitter.png" alt=""></div>
              <div class="footer-columnb"><img src="img/TikTok.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Facebook.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Instagram.png" alt=""></div>
            </div>
    
            <div class="footter-icon end">
              <div class="footer-columnb"><span>Secure Payment</span></div>
              <div class="footer-columnb"><img src="img/GrabPay.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Mastercard.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Shopeepay.png" alt=""></div>
              <div class="footer-columnb"><img src="img/MaybankQR.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Visa.png" alt=""></div>
              <div class="footer-columnb"><img src="img/Boost.png" alt=""></div>
              <div class="footer-columnb"><img src="img/TouchNGo.png" alt=""></div>
            </div>
    
            <div class="end"><span>Terms of Use
              |
              Privacy Policy
              |
              © Copyright 2022 QSR Stores Sdn. Bhd. (1098054)</span></div>
          </div>
      </footer>
  
    </body>
    

  <script>

    // 导航栏
    new Vue({
    el:'#menu',
    data:{
        now:0
    }
  })

    new Vue({
      el:'#vuebox',
        data:{
        big:0
      }
    })
  </script>
</html>
